<template>
  <div id="app"  v-loading.body="fullscreenLoading">
    <win-top></win-top>
    <div class="leftMenu">
      <ul class="menulist">
        <li v-bind:class="{ active: currentPage === '/table' }" class="iconfont icon-biaoge" @click="goto('/table')">表格</li>
        <li v-bind:class="{ active: currentPage === '/line' }" class="iconfont icon-tongji" @click="goto('/line')">曲线</li>
        <li v-bind:class="{ active: currentPage === '/setting' }" class="iconfont icon-shezhi" @click="goto('/setting')">设置</li>
      </ul>
    </div>
    <div class="rightPane"><transition name="move" mode="out-in"><router-view></router-view></transition></div>
  </div>
</template>

<script>
import '../../static/css/iconfont.css'
import MyChart from '@/components/MyChart'
import WinTop from '@/components/Wintop'
// import * as dbTools from '@/utils/excelTools.js'
export default {
  name: 'dlline',
  components: {
    MyChart, WinTop
  },
  data () {
    return {
      currentPage: '/table',
      fullscreenLoading: true
    }
  },
  created () {
    this.fullscreenLoading = false
    // dbTools.ExcleTools.loadPowerData('./有功功率曲线2.csv')
  },
  methods: {
    goto (addr) {
      this.$router.push({ path: addr })
      this.currentPage = addr
    }
  }
}
</script>

<style>
  /* CSS */
body{
    margin: 0;
  }
.app {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
  
.top {
  position: relative;
  height: 30px;
  line-height: 30px;
  font-family: Arial, Helvetica, sans-serif;
  color: #ddd;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  background-color: #358;
}
.leftMenu{
  background-color: rgb(50,65,87);
  position: absolute;
  top: 40px;
  left: 0;
  bottom: 0;width:60px;
}
.rightPane{
  position: absolute;
  top: 40px;
  left: 60px;
  bottom: 0;
  right: 0;
  text-align: center;
  padding: 15px 20px;
  box-sizing: border-box;
  overflow-y: scroll;
}
.menulist{
  width: inherit;
  margin: 0;
  padding: 0;
}
.menulist li{
  display: block;
  height: 48px;
  text-align: center;
  font-size: 26px;
  color: #fff;
  margin: 0;
  cursor: pointer;
  line-height: 48px;
  margin-left: 5px;
  font-weight: 400;
  font-size: 12px;
}
.menulist .active{
  color: #1d2939;
  background-color: #fff;
}
.move-enter-active,.move-leave-active{
    transition: opacity .5s;
}
.move-enter,.move-leave{
    opacity: 0;
}
</style>
